<script setup>
import { onMounted, ref } from 'vue'
// 导入发送接口
import { setSentAPI } from '@/apis/sendAPI'
import { getChatInfoAPI } from '@/apis/chatAPI'
const textarea2 = ref('')
// 接收父组件friendId数据
const props = defineProps({
  message: Number
})

const emit = defineEmits(['selfmessage'])// 传数据给chatInfo
const sendMessage = async () => {
  // ws.send(userInfo);
  // 或取当前时间
  const sendtime = new Date().toLocaleString()
  const recvId = props.message
  const content = textarea2.value
  const type = 0
  await setSentAPI({ recvId, content, type })
  const res = await getChatInfoAPI(recvId)
  const contents=({ sendId: res.data[0].userId, recvId: recvId, content: content, type: 0, sendtime: sendtime })
  emit('selfmessage', contents)
  // 发送的数据存到本地
  // localStorage.setItem('chatContentSend', JSON.stringify(contents.value))
  textarea2.value = ''
}



</script>



<template>
  <div class="bottom">
    <!-- 消息框 -->
    <el-input v-model="textarea2" :autosize="{ minRows: 5, maxRows: 5 }" type="textarea" placeholder="请输入要发送的消息..."
      resize="none" input-style="font-size:1vw;" @keydown.enter="sendMessage" />
    <div class="send">
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.bottom {
  height: 25vh;

  // 隐藏滚动条
  ::-webkit-scrollbar {
    display: none;
  }

  .send {
    height: 8vh;
    background-color: #d7d9e1;

    // 发送按钮
    button {
      width: 100%;
      height: 100%;
      border: 0;
      font-size: 2vw;
      color: #5e6982;

      &:hover {
        opacity: 0.6;
        color: #409ef5;
      }
    }
  }
}
</style>